<template>
  <div class="station-search">
    <el-table
      :data="dataList"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
      class="table-data"
      row-class-name="row-class"
      cell-class-name="cell-class"
      header-row-class-name="header-row-class"
      header-cell-class-name="header-cell-class"
    >
      <el-table-column
        v-for="(item, index) in colDataList"
        :label="item.label"
        :prop="item.prop"
        :key="index"
        align="center"
        :render-header="labelHead"
      >
      </el-table-column>
      <el-table-column
        v-if="isOperation"
        header-align="center"
        align="center"
        prop="operate"
        label="操作"
      >
        <div class="wrapper-button">
          <div class="search-button">
            <!-- <img src="../../assets/assessment/icon-search.png" alt="" /> -->
            <span>关闭</span>
          </div>
          
        </div>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "tablelistag",
  props: ["dataList", "colDataList", "config",'isOperation'],
  data() {
    return {
      isOperation:false
    };
  },
  created() {
    this.mergeRow();
  },
  methods: {
    labelHead: function (h, { column, $index }) {
      let l = column.label.length;
      let f = 16;
      column.minWidth = f * (l + 2); //加上一个文字长度
      return h("div", { class: "table-head", style: { width: "100%" } }, [
        column.label,
      ]);
    },
    isEmpty(val) {
      return typeof val == "undefined" || val === null || val == "-";
    },
    isObject(val) {
      return Object.prototype.toString.call(val) === "[object Object]";
    },
    arraySpanMethod({ row, column }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
    mergeRow() {
      let arr = [].concat(this.dataList);
      // arr.splice(index, 0, Object.assign({}, row))

      this.dataList = this.mergeData(arr);
    },
    delRow(index) {
      this.dataList.splice(index, 1);
      this.dataList = this.mergeData(this.dataList);
    },
    mergeData(list) {
      // mergeTarge - 合并项依据
      // combineProp - 根据mergeTarge 进行合并的单元格属性
      return this.filterData(this.config, [].concat(list));
    },
    filterData(config, dataList, targetProp) {
      const { mergeTarget, combineProp } = config;
      // 叠加的合并条件
      combineProp.forEach((column) => {
        // 记录合并项
        let combineCount = 1;
        if (this.isObject(column)) {
          return this.filterData.call(this, column, dataList, mergeTarget);
        }
        // 使用倒序遍历
        for (let i = dataList.length - 1; i >= 0; i--) {
          let curr = dataList[i],
            prev = dataList[i - 1];

          if (this.isEmpty(prev)) {
            // 已经循环完毕
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            break;
          }

          if (
            prev[targetProp] === curr[targetProp] &&
            prev[mergeTarget] === curr[mergeTarget] &&
            prev[`${column}`] === curr[`${column}`]
          ) {
            ++combineCount;
            curr[`${column}-span`] = {
              rowspan: 0,
              colspan: 0,
            };
          } else {
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            prev[`${column}-span`] = {
              rowspan: 1,
              colspan: 1,
            };
            // 前后项不相符时，对combinecount进行重置
            combineCount = 1;
          }
        }
      });
      return dataList;
    },
  },
};
</script>
<style scoped>
/*设置表头样式*/
.station-search .table-head {
  font-size: 16px !important;
}
.station-search .el-table .caret-wrapper {
  position: absolute;
  top: 2px;
  right: 0;
}
.station-search .el-table .cell,
.el-table th div {
  padding: 0 !important;
}
.station-search .el-table tr td .cell {
  padding: 5px 2px !important;
}
.station-search .el-table .cell,
.station-search .el-table th div,
.station-search .el-table--border td:first-child .cell,
.station-search .el-table--border th:first-child .cell {
  padding-left: 0 !important;
}
/*设置表头样式*/
</style>
<style  lang="less" scoped>
.wrapper-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  > div {
    margin-bottom: 8px;
  }
}
.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
 background: #FFEFEF;
  border: 1px solid #FF3819;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FF3819;
  }
  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}
.edit-button {
  .search-button;
  background: #dfffef;
  border: 1px solid #02c86c;
  > span {
    color: #02c86c;
  }
}
</style>

